<template>
    <div class="divBox">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <div class="container">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="22">
                <el-input
                  v-model="listPram.title"
                  placeholder="请输入名称"
                  clearable
                  size="small"
                  style="width: 400px;"
                >
                  <el-button
                    slot="append"
                    icon="el-icon-search"
                    size="small"
                    @click="handlerSearch"
                  />
                </el-input>
              </el-col>
            </el-row>
          </div>
        </div>
        <el-table :data="listData.list" style="width: 100%" v-loading="loading">
          <el-table-column prop="uid" label="用户id"> </el-table-column>
          <el-table-column prop="amount" label="操作金额"> </el-table-column>
          <el-table-column prop="cost" label="状态">
            <template slot-scope="scope"><el-tag :type="scope.row.status==0?'danger':''">{{ scope.row.status == 0 ?'审核中': scope.row.status == 1?'已提现':'审核失败' }}</el-tag > </template> </el-table-column>
          <el-table-column prop="mark" label="备注"> </el-table-column>
          <el-table-column prop="createTime" label="创建时间"> </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="danger" v-if="scope.row.status==0" @click="editForm(scope.row)" size="mini"
              >驳回</el-button
            >
            <el-button type="success" v-if="scope.row.status==0" @click="passForm(scope.row)" size="mini"
              >通过</el-button
            >
          </template>
        </el-table-column>
        </el-table>
        <el-pagination
          :current-page="listPram.page"
          :page-sizes="constants.page.limit"
          :layout="constants.page.layout"
          :total="listData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
      <el-dialog
      title="提示"
      :visible.sync="visible"
    >
    <el-input v-model="remark" placeholder="请输入驳回原因"></el-input>
    <div slot="footer" class="dialog-footer">
        <el-button @click="visible=false">取 消</el-button>
        <el-button
          type="primary"
          @click="updateForm"
          >确定</el-button
        >
   
      </div>
    </el-dialog>
    </div>
  </template>
  
  <script>
   import {
    yueExtractList,
    yueExtractAudit
  } from "@/api/financial";
  export default {
    name: "Yue",
    data() {
      return {
        constants: this.$constants,
        listPram: {
          page: 1,
          limit: 100
        },
        remark: '',
        visible: false,
        eidtObj: {},
        loading: true,
        listData: { list: [], total: 0 },
      };
    },
    created() {},
    mounted() {
      // 获取所有商家
      this.getListFn();
    },
    methods: {
      returnName(operation) {
        if (operation ==1) {
          return '提现转出'
        }
        if (operation ==2) {
          return '兑换积分'
        }
        if (operation ==3) {
          return '购买商品'
        }
        if (operation ==4) {
          return '购买抽奖次数'
        }
        if (operation ==5) {
          return '红包中奖'
        }
        if (operation ==6) {
          return '订单对账'
        }
      },
      editForm(item) {
            this.eidtObj = JSON.parse(JSON.stringify(item))
            this.visible = true
        },
        passForm(row) {
            let that = this;
            that.$modalSure("确定要通过该对账吗？").then(() => {
                row.status = 1
                yueExtractAudit(row).then(() => {
                that.$message.success("操作成功");
                that.getListFn();
                });
            });
        },
        updateForm(){
            yueExtractAudit({
                "status": 2,
                "id": this.eidtObj.id,
                "remark": this.remark
            }).then(() => {
              this.visible = false
                this.$message.success("操作成功");
                this.getListFn();
            });
        } ,
      getListFn() {
        this.loading = true;
        yueExtractList(this.listPram).then(res => {
          this.listData = res;
          this.loading = false;
        });
      },
      handlerSearch() {
        this.listPram.page = 1;
        this.getListFn(this.listPram);
      },
      handleSizeChange(val) {
        this.listPram.limit = val;
        this.getListFn(this.listPram);
      },
      handleCurrentChange(val) {
        this.listPram.page = val;
        this.getListFn(this.listPram);
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .el-input-group__append,
  .el-input-group__prepend {
    background-color: #1890ff !important;
    color: #fff !important;
    border-color: #1890ff !important;
    border-radius: 0 4px 4px 0;
  }
  .cascaderW {
    width: 350px;
  }
  .mapBox {
    text-align: center;
  }
  .sub {
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .question {
    width: 80%;
    .line {
      text-align: center;
    }
    .red {
      color: #ff0000;
    }
  }
  .bghui {
    background: #fafafa;
    width: 100%;
    position: relative;
    margin-bottom: 20px;
    .deleanswer {
      position: absolute;
      top: 0;
      right: 0;
      width: 80px;
      height: 40px;
  
      display: inline-flex;
      justify-content: center;
      align-items: center;
      font-size: 26px;
      color: #fff;
      background: #ff0000;
      padding-left: 10px;
      border-radius: 40px 0 0 100px;
    }
    .answer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20px;
    }
    .ifsuccess {
      width: 100px;
      height: 36px;
      background: #bababa;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .successicon {
      background: green;
      color: #fff;
    }
  }
  .red {
    color: red !important;
  }
  .question_main {
    padding: 10px;
  }
  </style>
  